<template>
	<view class="container">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="false" @clickLeft="goBack()">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">充值记录</text>
		</uni-nav-bar>
		<view class="head flex-r ac" :class="navBorder ? 'navborder':''">
			<view class="tab-list text-primary color-grey flex-c ac jc" v-for="(item,index) in tabList" :key="index" :class="{'active': tabCur == index}" @tap="tabChange(index)">
				<text>{{item.name}}</text>
			</view>
		</view>
		<keep-alive>
			<template v-for="(item, index) in tabList">
				<view class="body bottom-ios flex-c" :key="index" v-if="tabCur == index" @touchstart="touchStart" @touchend="touchEnd">
					<EmptyContent v-if="!listData[tabCur][0]" top="250rpx" :text="index == 2 ? '暂无奖励记录' : '暂无充值记录'" img="qsy_zwczjl" @refresh="getRechargeRecord(index)"></EmptyContent>
					<view class="list">
						<view class="list-item flex-r ac jsb" v-for="(item,index) in listData[tabCur]" :key="index">
							<view class="item-left flex-r ac">
								<text class="item-type text-regular" :class="item.orderChannel">
									<template v-if="item.orderChannel == 'recharge'">充</template>
									<template v-else-if="item.payChannel.includes('LV')">成</template>
									<template v-else-if="item.payChannel == 'INVITEUSER'">邀</template>
									<template v-else-if="item.payChannel == 'AWARD'">奖</template>
									<template v-else-if="item.payChannel == 'welfarehk'">赠</template>
								</text>
								<view class="item-title text-primary flex-c">
									<text class="title">
										<template v-if="item.orderChannel == 'recharge'">充值</template>
										<template class="title" v-else-if="item.payChannel.includes('LV')">{{item.payChannel}}成长值达标奖励</template>
										<template class="title" v-else-if="item.payChannel == 'INVITEUSER'">邀请好友奖励</template>
										<template class="title" v-else-if="item.payChannel == 'AWARD'">消费奖励</template>
										<template class="title" v-else-if="item.payChannel == 'welfarehk'">平台回馈赠送</template>
									</text>
									<text class="text-small color-grey mt20">{{item.createTime}}</text>
								</view>
							</view>
							<view class="item-right flex-c">
								<text class="item-money text-regular" :class="item.orderChannel">+{{item.totalBean}}</text>
								<text class="text-small color-grey mt20" v-if="item.orderChannel == 'recharge' && item.sendBean > 0">
									充值{{item.bean}} + 奖励{{item.sendBean}}
								</text>
							</view>
						</view>
					</view>
					<view class="list-end flex-r mt20 mb20" v-if="tabData[tabCur].isEnd">
						<text>已经到底啦～</text>
					</view>
				</view>
			</template>
		</keep-alive>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listData:[[],[],[]],
				
				tabList: [
					{name: '全部', type: 'all'},{name: '充值', type: 'recharge'},{name: '奖励', type: 'award'}
				],
				tabCur: 0,
				tabData: [
					{pageNo: 1, isEnd: false},
					{pageNo: 1, isEnd: false},
					{pageNo: 1, isEnd: false}
				],
				
				navBorder: false
			}
		},
		computed: {
			user() {
				return this.$store.state.user
			},
		},
		onLoad() {
			this.getRechargeRecord(this.tabCur)
		},
		onReachBottom() {
			if(!this.tabData[this.tabCur].isEnd){
				this.getRechargeRecord(this.tabCur)
			}
		},
		onPageScroll(e) {
			if(e.scrollTop > 10){
				this.navBorder = true
			}else{
				this.navBorder = false
			}
		},
		methods: {
			//获取充值记录
			getRechargeRecord(index) {
				this.$http.get({
					url: '/api/userRechargeRecord/queryUserAssetRecordPage',
					data: {
						orderChannel: this.tabList[index].type,
						userId: this.user.userId,
						pageNo: this.tabData[index].pageNo,
						pageSize: 15
					},
				}).then(data => {
					console.log(data);
					if(data.success && data.result && data.result.total){
						if(data.result.current == 1){
							this.listData[index] = data.result.records
						}else{
							this.listData[index].push(...data.result.records)
						}
						this.tabData[index].isEnd = data.result.current >= data.result.pages
						this.tabData[index].pageNo = data.result.current + 1
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//选项卡切换
			tabChange(index) {
				this.tabCur = index;
				if(!this.listData[this.tabCur][0]){
					this.getRechargeRecord(index)
				}
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
			},
			touchStart(e) {
				if (e.changedTouches.length == 1) {
					this.startX = e.changedTouches[0].clientX
					this.startY = e.changedTouches[0].clientY
				}
			},
			touchEnd(e) {
				if (e.changedTouches.length == 1) {
					var endX = e.changedTouches[0].clientX;
					var endY = e.changedTouches[0].clientY;
					var xTowards = endX - this.startX;
					var yTowards = endY - this.startY;
					if (xTowards > 50 && Math.abs(yTowards) < 50) {//向右
						console.log('向右')
						if(this.tabCur > 0){
							this.tabChange(this.tabCur - 1)
						}
					}
					if (xTowards < -50 && Math.abs(yTowards) < 50) {//向左
						console.log('向左')
						let maxlen = this.tabList.length - 1;
						if(this.tabCur < maxlen){
							this.tabChange(this.tabCur + 1)
						}
					}
				}
			},
			goBack(){
				let pages = getCurrentPages().length
				console.log(pages);
				if(pages > 1){
					this.$Router.back(1)
				}else{
					this.$Router.replace({name: 'userrecharge'})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 0;
		.head{
			height: 88rpx;
			width: 100%;
			max-width: $max-width;
			margin: $pc-margin;
			background: #FFFFFF;
			position: fixed;
			top: $navbar-height;
			left: 0;
			right: 0;
			.tab-list{
				flex: 2;
				height: 88rpx;
				&.active{
					color: #0055FF;
					font-weight: 500;
					background-image: url("~@/public/images/user/hk.png");
					background-repeat: no-repeat;
					background-position: bottom center;
					background-size: 60rpx 8rpx;
				}
			}
		}
		.body{
			margin-top: 108rpx;
			.list-item{
				padding: 25rpx 20rpx;
				border-bottom: 1rpx solid #EDEDED;
				background-color: #FFFFFF;
				box-sizing: border-box;
				.item-left{
					.item-type{
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						line-height: 64rpx;
						color: #FFFFFF;
						text-align: center;
						&.recharge{
							background-color: #0055FF;
						}
						&.draw{
							background-color: #FFAA00;
						}
						&.award{
							background-color: #FF0055;
						}
					}
					.item-title{
						margin-left: 20rpx;
						.title{
							font-weight: 500;
						}
					}
				}
				.item-right{
					align-items: flex-end;
					.item-money{
						font-weight: 500;
						&.recharge{
							color: #4C88FF;
						}
						&.draw{
							color: #FFAA00;
						}
						&.award{
							color: #FF0055;
						}
					}
				}
			}
			.list-item:last-child{
				border: none;
			}
		}
	}
</style>
